{% extends 'base.html' %}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

{% block title %}
    用户注册
{% endblock %}


{% block styles %}
    {{ super() }}
    <style>
        #container {
            width: 100%;
            height: 600px;
            margin: 0 auto;
            padding-top: 30px;
            text-align: center;
        }

        #container h1 {
            text-align: center;
            margin-bottom: 50px;
        }


    </style>
{% endblock %}

{% block newcontent %}

    <div id="container">
        <h1>用户注册</h1>
        <form class="form-horizontal" method="post" action="{{ url_for('user.register') }}">
            <div class="form-group">
                <label for="inputUsername" class="col-md-4 control-label">用户名</label>
                <div class="col-md-4">
                    <input type="text" class="form-control" id="inputUsername" placeholder="请输入用户名" name="username">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword" class="col-md-4 control-label">密码</label>
                <div class="col-md-4">
                    <input type="password" class="form-control" id="inputPassword" placeholder="请输入密码"
                           name="password">
                </div>
            </div>
            <div class="form-group">
                <label for="inputConfirm" class="col-md-4 control-label">确认密码</label>
                <div class="col-md-4">
                    <input type="password" class="form-control" id="inputConfirm" placeholder="请重新输入密码"
                           name="repassword">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPhone" class="col-md-4 control-label">手机号</label>
                <div class="col-md-4">
                    <input type="text" class="form-control" id="InputPhone" placeholder="请输入手机号码"
                           name="phone"><span></span>
                </div>
            </div>
            <div class="form-group">
                <label for="inputEmail" class="col-md-4 control-label">邮箱</label>
                <div class="col-md-4">
                    <input type="email" class="form-control" id="inputEmail" placeholder="请输入你的邮箱"
                           name="email">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" id="register" class="btn btn-info" col-md-3>注&nbsp&nbsp&nbsp&nbsp册</button>
                    <button type="submit" class="btn btn-info" col-md-3>重&nbsp&nbsp&nbsp&nbsp置</button>
                </div>
            </div>
        </form>
    </div>
{% endblock %}

{# 添加JS脚本 #}
{% block scripts %}
    {{ super() }}
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        $(function () {
            //判断手机号码是不是11位
            $("#InputPhone").blur(function () {
                let phone = $('#InputPhone').val();
                let span_ele = $('#InputPhone').next('span');
                if (phone.length == 11) {
                    span_ele.text('')
                    $.get("{{ url_for('user.check_phone')}}", {phone: phone}, function (data) {
                            if (data.code == 200) {
                                span_ele.text("")
                            } else {
                                alert(data.msg);
                            }
                        }
                    )
                } else {
                    span_ele.css({'color': 'red', 'font-size': '12px'});
                    span_ele.text('必须输入11位手机号码!');
                }

            });
            $('#register').click(function () {
                let phone = $('#InputPhone').val();

                console.log(phone)
                $.get("{{ url_for('user.check_phone')}}", {phone: phone}, function (data) {
                        if (data.code == 200) {
                            alert('注册成功！');
                        } else {
                            alert(data.msg);
                        }
                    }
                )
            })
        })
    </script>

{% endblock %}